<script setup lang="ts" name="inspection_patrolLog">
import { reactive, ref, onMounted } from "vue";
import {
  getAutoCheckLogDateStat,
  getAutoCheckLog,
} from "@/api/server_artificial";
const list: any = reactive([]);
const journalText = reactive([
  {
    text: "信息内容",
  },
]);
const lists: any = ref({
  name: "",
  camera: "",
  time: "",
});
const tips = (index: any) => {
  lists.value.name = list[index].name;
  lists.value.camera = list[index].camera;
  lists.value.time = list[index].time;
};
const journaldialogVisible = ref(false);

// 折叠
const dialogTableVisible = ref(false);

const dialog = ref({});

// 点击日历
const gmtDate = ref('');
const collapse1 = (index: any, itemlist: any) => {
  dialogTableVisible.value = true;
  // dialog.value = collapse.value[index].date;
  gmtDate.value = itemlist.gmt_date;
console.log('rizhi',gmtDate.value);

  

  getListitem(1);
};
const activeNames = ref("1");

const handleChange = (val: string[]) => {};

const collapse09: any = ref([]);
const collapse10: any = ref([]);
const collapse11: any = ref([]);
const collapse12: any = ref([]);
const value1 = ref("");
const collapselist09: any = ref({
  id: "09",
  month: "",
  month1: "",
  yearMonth: "",
  number: "",
  date: [
    {
      gmt_date: "",
      cnt: "",
    },
  ],
});
const collapselist10: any = ref({
  id: "10",
  month: "",
  month1: "",
  yearMonth: "",
  number: "",
  date: [
    {
      gmt_date: "",
      cnt: "",
    },
  ],
});
const collapselist11: any  = ref({
  id: "11",
  month: "",
  month1: "",
  yearMonth: "",
  number: "",
  date: [
    {
      gmt_date: "",
      cnt: "",
    },
  ],
});
const collapselist12: any  = ref({
  id: "12",
  month: "",
  month1: "",
  yearMonth: "",
  number: "",
  date: [
    {
      gmt_date: "",
      cnt: "",
    },
  ],
});
// 获取日志统计列表
const getList = async () => {
  let res: any = await getAutoCheckLogDateStat({
    startDate: '2022-09-1',
    endDate: '2022-12-31',
  });
  // collapse.value = res.list  res.list['2022-09']

  collapselist09.value.month = res.list["2022-09"].month;
  collapselist09.value.number = res.list["2022-09"].totalCnt;
  collapselist09.value.month1 = res.list["2022-09"].yearMonth;
  collapselist09.value.date = res.list["2022-09"].data;

  collapselist10.value.month = res.list["2022-10"].month;
  collapselist10.value.number = res.list["2022-10"].totalCnt;
  collapselist10.value.month1 = res.list["2022-10"].yearMonth;
  collapselist10.value.date = res.list["2022-10"].data;

  collapselist11.value.month = res.list["2022-11"].month;
  collapselist11.value.number = res.list["2022-11"].totalCnt;
  collapselist11.value.month1 = res.list["2022-11"].yearMonth;
  collapselist11.value.date = res.list["2022-11"].data;

  collapselist12.value.month = res.list["2022-12"].month;
  collapselist12.value.number = res.list["2022-12"].totalCnt;
  collapselist12.value.month1 = res.list["2022-12"].yearMonth;
  collapselist12.value.date = res.list["2022-12"].data;

console.log('日志',res);


  // collapselist12.value.month = res.list["2022-12"].month;
  // collapselist12.value.number = res.list["2022-12"].totalCnt;
  // collapselist12.value.month1 = res.list["2022-12"].yearMonth;
  // collapselist12.value.date = res.list["2022-12"].data;

  // collapselist.value.date.unshift(
  //   {gmt_date: "",cnt: "",},
  //   {gmt_date: "",cnt: "",},
  //   {gmt_date: "",cnt: "",},
  // );collapselist

  // collapselist.value.date.reverse()
  collapse09.value.unshift(collapselist09.value);
  collapse10.value.unshift(collapselist10.value);
  collapse11.value.unshift(collapselist11.value);
  collapse12.value.unshift(collapselist12.value);
};

// 获取日志内容
const contentItem: any = ref({});
const getListitem = async (page: number) => {
  let res: any = await getAutoCheckLog({
    gmtDate: gmtDate.value,
    page: listParams.value.page,
    pageSize: listParams.value.pageSize,
  });
  total.value = Number(res.total);
  contentItem.value = res;
  console.log("日志内容", contentItem.value);
};
// 分页
const total = ref(0);
const listParams = ref({
  page: 1,
  pageSize: 3,
});

const currentPage = ref(1);
const handleSizeChange = (val: number) => {
  listParams.value.pageSize = val;
  getListitem(currentPage.value);
  
};
const handleCurrentChange = (val: number) => {
  
  listParams.value.page = val;
  getListitem(val);
};
onMounted(() => {
  getList();
});
</script>
<template>
  <!-- <div class="content"> -->
    <!-- 年份 -->
    <!-- <div class="block">
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择巡检时间"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
    </div> -->
    <!-- 搜索、配置 -->
    <!-- <div style="padding-left: 15px">
      <el-button type="primary" plain>搜索</el-button>
      <el-button type="success" plain>重置</el-button>
    </div> -->
  <!-- </div> -->
  <div class="content-bom">
    <!-- 9月 -->
    <div class="demo-collapse">
      <el-collapse
        v-model="activeNames"
        @change="handleChange"
        name="1"
        v-for="(item, index) in collapse09"
        :key="index"
        accordion
      >
        <el-collapse-item>
          <template #title>
            <span class="demo-collapse-span">{{ item.month }}月</span>
            <span class="demo-collapse-spa">巡检次数：{{ item.number }}</span>
          </template>
          <div class="collapse-box-date">
            <div>{{ item.month1 }}</div>
          </div>
          <div class="collapse-box-date1">
            <div>一</div>
            <div>二</div>
            <div>三</div>
            <div>四</div>
            <div>五</div>
            <div>六</div>
            <div>七</div>
          </div>
          <div class="collapse-box">
            <div class="collapse-box-item-show-a"></div>
            <div class="collapse-box-item-show-a"></div>
            <div class="collapse-box-item-show-a"></div>
            <div
              class="collapse-box-item-show-a"
              v-for="(itemlist, index) in item.date"
              :key="index"
              v-show="itemlist.gmt_date == ''"
            ></div>
            <div
              class="collapse-box-item"
              @click="collapse1(index, itemlist)"
              v-for="(itemlist, index) in item.date"
              :key="index"
              v-show="itemlist.gmt_date !== ''"
            >
              <div class="collapse-box-item-a" v-if="itemlist.gmt_date !== ''">
                {{ itemlist.gmt_date }}
              </div>
              <div class="collapse-box-item-b" v-if="itemlist.cnt !== ''">
                巡检次数：{{ itemlist.cnt }}
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 10月 -->
    <div class="demo-collapse">
      <el-collapse
        v-model="activeNames"
        @change="handleChange"
        name="1"
        v-for="(item, index) in collapse10"
        :key="index"
        accordion
      >
        <el-collapse-item>
          <template #title>
            <span class="demo-collapse-span">{{ item.month }}月</span>
            <span class="demo-collapse-spa">巡检次数：{{ item.number }}</span>
          </template>
          <div class="collapse-box-date">
            <div>{{ item.month1 }}</div>
          </div>
          <div class="collapse-box-date1">
            <div>一</div>
            <div>二</div>
            <div>三</div>
            <div>四</div>
            <div>五</div>
            <div>六</div>
            <div>七</div>
          </div>
          <div class="collapse-box">
            <div class="collapse-box-item-show-a"></div>
            <div class="collapse-box-item-show-a"></div>
            <div class="collapse-box-item-show-a"></div>
            <div class="collapse-box-item-show-a"></div>
            <div class="collapse-box-item-show-a"></div>
            <div
              class="collapse-box-item-show-a"
              v-for="(itemlist, index) in item.date"
              :key="index"
              v-show="itemlist.gmt_date == ''"
            ></div>
            <div
              class="collapse-box-item"
              @click="collapse1(index, itemlist)"
              v-for="(itemlist, index) in item.date"
              :key="index"
              v-show="itemlist.gmt_date !== ''"
            >
              <div class="collapse-box-item-a" v-if="itemlist.gmt_date !== ''">
                {{ itemlist.gmt_date }}
              </div>
              <div class="collapse-box-item-b" v-if="itemlist.cnt !== ''">
                巡检次数：{{ itemlist.cnt }}
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 11月 -->
    <div class="demo-collapse">
      <el-collapse
        v-model="activeNames"
        @change="handleChange"
        name="1"
        v-for="(item, index) in collapse11"
        :key="index"
        accordion
      >
        <el-collapse-item>
          <template #title>
            <span class="demo-collapse-span">{{ item.month }}月</span>
            <span class="demo-collapse-spa">巡检次数：{{ item.number }}</span>
          </template>
          <div class="collapse-box-date">
            <div>{{ item.month1 }}</div>
          </div>
          <div class="collapse-box-date1">
            <div>一</div>
            <div>二</div>
            <div>三</div>
            <div>四</div>
            <div>五</div>
            <div>六</div>
            <div>七</div>
          </div>
          <div class="collapse-box">
            <div class="collapse-box-item-show-a"></div>
            <div
              class="collapse-box-item-show-a"
              v-for="(itemlist, index) in item.date"
              :key="index"
              v-show="itemlist.gmt_date == ''"
            ></div>
            <div
              class="collapse-box-item"
              @click="collapse1(index, itemlist)"
              v-for="(itemlist, index) in item.date"
              :key="index"
              v-show="itemlist.gmt_date !== ''"
            >
              <div class="collapse-box-item-a" v-if="itemlist.gmt_date !== ''">
                {{ itemlist.gmt_date }}
              </div>
              <div class="collapse-box-item-b" v-if="itemlist.cnt !== ''">
                巡检次数：{{ itemlist.cnt }}
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- 12月 -->
    <div class="demo-collapse">
      <el-collapse
        v-model="activeNames"
        @change="handleChange"
        name="1"
        v-for="(item, index) in collapse12"
        :key="index"
        accordion
      >
        <el-collapse-item>
          <template #title>
            <span class="demo-collapse-span">{{ item.month }}月</span>
            <span class="demo-collapse-spa">巡检次数：{{ item.number }}</span>
          </template>
          <div class="collapse-box-date">
            <div>{{ item.month1 }}</div>
          </div>
          <div class="collapse-box-date1">
            <div>一</div>
            <div>二</div>
            <div>三</div>
            <div>四</div>
            <div>五</div>
            <div>六</div>
            <div>七</div>
          </div>
          <div class="collapse-box">
            <div class="collapse-box-item-show-a"></div>
            <div class="collapse-box-item-show-a"></div>
            <div class="collapse-box-item-show-a"></div>
            <div
              class="collapse-box-item-show-a"
              v-for="(itemlist, index) in item.date"
              :key="index"
              v-show="itemlist.gmt_date == ''"
            ></div>
            <div
              class="collapse-box-item"
              @click="collapse1(index, itemlist)"
              v-for="(itemlist, index) in item.date"
              :key="index"
              v-show="itemlist.gmt_date !== ''"
            >
              <div class="collapse-box-item-a" v-if="itemlist.gmt_date !== ''">
                {{ itemlist.gmt_date }}
              </div>
              <div class="collapse-box-item-b" v-if="itemlist.cnt !== ''">
                巡检次数：{{ itemlist.cnt }}
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- 弹窗 -->
    <el-dialog v-model="dialogTableVisible" title="巡检日志" width="900px">
      <div
        class="dialog-text-box"
        v-for="(item, index) in contentItem.list"
        :key="index"
      >
        <div class="dialog-text-box-w">
          <span class="dialog-text"
            >时间：<span class="dialog-texta">{{ item.gmt_create }}</span></span
          >
          <span class="dialog-text"
            >巡检任务：<span class="dialog-texta">巡检任务一</span></span
          >
          <span class="dialog-text"
            >巡检人：<span class="dialog-texta">{{
              item.userInfo.name
            }}</span></span
          >
          <span class="dialog-text"
            >电话：<span class="dialog-texta">{{
              item.userInfo.phone
            }}</span></span
          >
        </div>
        <div class="dialog-textb">
          内容：
          <div class="dialog-textc">
            {{ item.content }}
          </div>
        </div>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:currentPage="currentPage"
        :page-sizes="[3, 5, 10]"
        :page-size="listParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.dialog-text-box {
  background-color: #1e1e1f;
  padding: 15px 0 10px 0;
  margin-bottom: 20px;
  border-radius: 10px;

  .dialog-text-box-w {
    border-bottom: 1px solid #3f3f42;
    padding-bottom: 10px;
  }
}
.dialog-text {
  margin: 20px;
  font-size: 16px;
}
.dialog-texta {
  color: #39a0f0;
}
.dialog-textb {
  margin: 10px 20px;
  color: #1ecc94;

  .dialog-textc {
    margin-top: 5px;
    color: #39a0f0;
    font-size: 14px;
    color: #ffdc00;
  }
}
.content {
  display: flex;
  align-items: center;
  height: 40px;
}

.plate {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.plate-title {
  width: 18%;
  padding: 10px;
  margin: 10px;

  background-image: linear-gradient(#0c2233, #0c0c0c);
}

.plate-tip {
  border-bottom: 1px solid #43bbff;
  padding-bottom: 10px;
}

.plate-text {
  color: #3aa0f0;
  padding-bottom: 8px;
}

.plate-text text {
  color: white;
}

.model-text {
  display: flex;
  color: #39a0f0;
}

.model-text text {
  color: white;
}

.example-pagination-block {
  margin-top: 50px;
}

.model-text-tips {
  border: #374047 1px solid;
  background: #0c1e2c;
  border-radius: 5px;
  display: flex;
  padding: 5px 10px;
  margin-top: 15px;
}
.model-time {
  width: 10%;
}
.model-content {
  color: #39a0f0;
  margin-left: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-content text {
  color: white;
}
// 月份
.content-bom {
  margin-top: 10px;
  padding: 0 20px;
  height: calc(100% - 50px);

  .demo-collapse-span {
    margin-right: 15px;
    color: #ffdc00;
    font-size: 20px;
  }
  .demo-collapse-spa {
    padding-top: 5px;
  }

  // 日历
  .collapse-box-date {
    width: 810px;
    padding: 3px;
    font-size: 20px;
    color: #1ecc94;
    border-bottom: #161616 solid 2px;
    margin-left: 45px;
  }
  .collapse-box-date1 {
    width: 810px;
    padding-top: 5px;
    margin-left: 45px;
    display: flex;
    color: #9b9b9b;
    font-size: 16px;
    justify-content: space-around;
  }
  .collapse-box {
    width: 820px;
    margin-left: 45px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .collapse-box-item {
      width: 110px;
      padding: 8px;
      margin: 3px;
      background-color: #1e1e1f;
      border-radius: 5px;
      cursor: pointer;

      .collapse-box-item-a {
        font-size: 14px;
        color: #fff;
      }

      .collapse-box-item-b {
        font-size: 12px;
        color: #1ecc94;
      }
    }
    .collapse-box-item-show-a {
      width: 110px;
      padding: 8px;
      margin: 3px;
      border-radius: 5px;
    }
    .collapse-box-item-show-b {
      width: 110px;
      padding: 8px;
      margin: 3px;
      border-radius: 5px;
    }

    .collapse-box-item:hover {
      background-color: #1f2c3f;
      color: #fff;

      .collapse-box-item-a {
        color: #1ecc94;
      }

      .collapse-box-item-b {
        color: #fff;
      }
    }
  }
}
</style>
